<template>
  <!-- 电表流量图表 -->
  <div class="app-container">
    <el-row :gutter="20" class="full-height">
      <el-col :span="leftColSpan" class="full-height" ref="leftCol">
        <div class="panel-wrapper">
          <div class="left-panel" :class="{'collapsed': isCollapse}" :style="{ width: isCollapse ? '0' : leftWidth + 'px' }">
            <div class="tree-wrapper" :class="{'hidden': isCollapse}">
              <ammeter-tree @node-click="handleNodeClick" />
            </div>
            <div class="resizer" 
                 @mousedown="startResize"
                 :class="{ 'resizing': isResizing }">
            </div>
          </div>
        </div>
        <div class="collapse-btn" 
             :style="{ left: isCollapse ? '0' : leftWidth - 1 + 'px' }"
             @click="toggleCollapse">
          <i :class="isCollapse ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"></i>
        </div>
      </el-col>
      <el-col :span="24" class="full-height right-col" :style="rightColStyle">
        <div class="chart-container">
          <!-- 添加搜索区域 -->
          <div class="search-wrapper">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
              <el-form-item label="类型" prop="statType">
                <el-select v-model="queryParams.statType" placeholder="请选择统计类型" @change="handleTypeChange">
                  <el-option label="15分钟" value="min15" />
                  <el-option label="小时" value="hour" />
                  <el-option label="日" value="day" />
                  <el-option label="月" value="month" />
                  <el-option label="年" value="year" />
                </el-select>
              </el-form-item>
              
              <!-- 15分钟和小时的时间选择 -->
              <template v-if="['min15', 'hour'].includes(queryParams.statType)">
                <el-form-item label="时间范围" prop="timeRange">
                  <el-date-picker
                    v-model="timeRange"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :value-format="queryParams.statType === 'hour' ? 'yyyy-MM-dd HH:00:00' : 'yyyy-MM-dd HH:mm:ss'"
                    :format="queryParams.statType === 'hour' ? 'yyyy-MM-dd HH:00:00' : 'yyyy-MM-dd HH:mm:ss'"
                    :picker-options="pickerOptions"
                    @change="handleTimeChange">
                  </el-date-picker>
                </el-form-item>
              </template>
              
              <!-- 日期选择 -->
              <template v-else-if="queryParams.statType === 'day'">
                <el-form-item label="时间范围" prop="timeRange">
                  <el-date-picker
                    v-model="timeRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    @change="handleTimeChange">
                  </el-date-picker>
                </el-form-item>
              </template>
              
              <!-- 月份选择 -->
              <template v-else-if="queryParams.statType === 'month'">
                <el-form-item label="时间范围" prop="timeRange">
                  <el-date-picker
                    v-model="timeRange"
                    type="monthrange"
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    value-format="yyyy-MM"
                    @change="handleTimeChange">
                  </el-date-picker>
                </el-form-item>
              </template>
              
              <!-- 年份选择 -->
              <template v-else-if="queryParams.statType === 'year'">
                <el-form-item label="时间范围" prop="timeRange">
                  <el-date-picker
                    v-model="timeRange"
                    type="year"
                    placeholder="选择年份"
                    value-format="yyyy"
                    @change="handleTimeChange">
                  </el-date-picker>
                </el-form-item>
              </template>

              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 图表内容 -->
          <div class="chart-content">
            <div id="sankeyChart" ref="sankeyChart"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AmmeterTree from "@/components/AmmeterTree";
import { getAmmeterFlowData } from "@/api/mes/bm/ammeterData";
import * as echarts from 'echarts';

export default {
  name: "AmmeterDataFlow",
  components: {
    AmmeterTree
  },
  data() {
    return {
      selectedNode: null,
      isCollapse: false,
      isResizing: false,
      leftWidth: 350,
      startX: 0,
      startWidth: 0,
      myChart: null,
      // 修改查询参数的默认值
      queryParams: {
        statType: 'day',  // 默认为日
        beginTime: '',
        endTime: '',
        type: 'master',   // 默认为北化浩绅
        id: '0'           // 默认为根节点ID
      },
      timeRange: [],
      // 时间选择器配置
      pickerOptions: {
        shortcuts: [{
          text: '最近半个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },
  created() {
    // 设置默认时间范围为近半个月
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
    this.timeRange = [start, end];
    this.queryParams.beginTime = this.formatDate(start, 'yyyy-MM-dd');
    this.queryParams.endTime = this.formatDate(end, 'yyyy-MM-dd');
    
    // 自动执行查询
    this.handleQuery();
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.resizeChart);
  },
  computed: {
    leftColSpan() {
      return 'auto';
    },
    // 添加计算属性，强制控制右侧面板样式
    rightColStyle() {
      const offset = this.isCollapse ? 20 : this.leftWidth + 20; // 加上20px的间距
      return {
        width: `calc(100% - ${offset}px)`,
        marginLeft: this.isCollapse ? '20px' : `${this.leftWidth}px`,
        transition: 'all 0.3s'
      };
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log('节点数据:', data);
      this.selectedNode = data;
      
      // 设置查询参数
      this.queryParams.type = data.type;
      this.queryParams.id = data.id;
      
      console.log('查询参数:', this.queryParams);
      // 触发查询
      this.handleQuery();
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
      // 添加延时，确保DOM更新后再调整图表大小
      setTimeout(() => {
        this.forceResizeChart();
      }, 300); // 使用setTimeout确保转换动画完成后再调整图表
    },
    startResize(e) {
      if (this.isCollapse) return;
      this.isResizing = true;
      this.startX = e.clientX;
      this.startWidth = this.leftWidth;
      
      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stopResize);
      
      document.body.style.userSelect = 'none';
      document.body.style.cursor = 'col-resize';
    },
    resize(e) {
      if (this.isResizing) {
        const dx = e.clientX - this.startX;
        let newWidth = this.startWidth + dx;
        newWidth = Math.max(200, Math.min(newWidth, 800));
        this.leftWidth = newWidth;
        
        // 在调整大小时实时更新图表尺寸
        this.forceResizeChart();
      }
    },
    stopResize() {
      this.isResizing = false;
      document.removeEventListener('mousemove', this.resize);
      document.removeEventListener('mouseup', this.stopResize);
      
      document.body.style.userSelect = '';
      document.body.style.cursor = '';
      
      // 调整完成后强制更新图表尺寸
      this.forceResizeChart();
    },
    // 处理类型变化
    handleTypeChange(value) {
      const now = new Date();
      let start = new Date();
      
      switch(value) {
        case 'min15':
          // 15分钟类型，默认近3天
          start.setTime(now.getTime() - 3600 * 1000 * 24 * 3);
          this.timeRange = [start, now];
          break;
        case 'hour':
          // 小时类型，默认近7天
          start.setTime(now.getTime() - 3600 * 1000 * 24 * 7);
          this.timeRange = [start, now];
          break;
        case 'day':
          // 日类型，默认近15天
          start.setTime(now.getTime() - 3600 * 1000 * 24 * 15);
          this.timeRange = [start, now];
          break;
        case 'month':
          // 月类型，默认近3个月
          start.setMonth(now.getMonth() - 3);
          this.timeRange = [start, now];
          // 设置月初和月末
          const startMonthStr = this.formatDate(start, 'yyyy-MM');
          const endMonthStr = this.formatDate(now, 'yyyy-MM');
          this.queryParams.beginTime = startMonthStr + '-01';
          const endDate = new Date(endMonthStr.slice(0,4), parseInt(endMonthStr.slice(5,7)), 0);
          this.queryParams.endTime = `${endMonthStr}-${endDate.getDate()}`;
          break;
        case 'year':
          // 年类型，默认2023年
          this.timeRange = '2023';
          // 设置年初和当前年末
          this.queryParams.beginTime = '2023-01-01';
          const currentYear = now.getFullYear();
          this.queryParams.endTime = `${currentYear}-12-31`;
          break;
      }
      
      // 根据不同类型设置时间格式
      if (value === 'min15' || value === 'hour') {
        let beginTimeStr, endTimeStr;
        
        if (value === 'hour') {
          // 小时类型，开始时间设为整点，结束时间设为59分59秒
          beginTimeStr = this.formatDate(this.timeRange[0], 'yyyy-MM-dd HH') + ':00:00';
          endTimeStr = this.formatDate(this.timeRange[1], 'yyyy-MM-dd HH') + ':59:59';
        } else {
          // 15分钟类型保持原样
          beginTimeStr = this.formatDate(this.timeRange[0], 'yyyy-MM-dd HH:mm:ss');
          endTimeStr = this.formatDate(this.timeRange[1], 'yyyy-MM-dd HH:mm:ss');
        }
        
        this.queryParams.beginTime = beginTimeStr;
        this.queryParams.endTime = endTimeStr;
      } else if (value === 'day') {
        this.queryParams.beginTime = this.formatDate(this.timeRange[0], 'yyyy-MM-dd');
        this.queryParams.endTime = this.formatDate(this.timeRange[1], 'yyyy-MM-dd');
      }
      
      // 触发查询
      this.handleQuery();
    },
    
    // 处理时间变化
    handleTimeChange(value) {
      if (value) {
        if (this.queryParams.statType === 'year') {
          // 年份选择，设置年初和当前年末
          this.queryParams.beginTime = value + '-01-01';
          const now = new Date();
          const currentYear = now.getFullYear();
          this.queryParams.endTime = `${currentYear}-12-31`;
        } else if (this.queryParams.statType === 'month') {
          // 月份选择，设置为月初和月末
          const [startMonth, endMonth] = value;
          // 设置开始时间为月初1号
          this.queryParams.beginTime = startMonth + '-01';
          // 设置结束时间为月末
          const endDate = new Date(endMonth.slice(0,4), parseInt(endMonth.slice(5,7)), 0);
          this.queryParams.endTime = `${endMonth}-${endDate.getDate()}`;
        } else if (this.queryParams.statType === 'hour') {
          // 小时选择，开始时间已经是整点，需要设置结束时间为59分59秒
          const [start, end] = value;
          this.queryParams.beginTime = start; // 已经是 HH:00:00 格式
          // 将结束时间的 00:00 改为 59:59
          this.queryParams.endTime = end.substring(0, 13) + ':59:59';
        } else {
          // 其他类型（15分钟）使用原始范围
          this.queryParams.beginTime = value[0];
          this.queryParams.endTime = value[1];
        }
        // 触发查询
        this.handleQuery();
      } else {
        this.queryParams.beginTime = '';
        this.queryParams.endTime = '';
      }
    },
    
    // 初始化图表
    initChart() {
      // 确保DOM已经渲染
      this.$nextTick(() => {
        if (!this.myChart && this.$refs.sankeyChart) {
          this.myChart = echarts.init(this.$refs.sankeyChart);
          this.myChart.showLoading();
          
          // 添加窗口大小变化监听
          window.addEventListener('resize', this.forceResizeChart);
        }
      });
    },
    
    // 更新图表数据
    updateChart(data) {
      if (!this.myChart) {
        this.initChart();
      }
      
      // 获取原始节点和链接数据
      const originalNodes = data.nodes.name.map((name, index) => {
        // 获取节点的占比，如果是根节点则固定为100
        const ratio = name === '北化浩绅' ? 100 : (data.ratios[name] || 0);
        
        // 查找该节点的值
        let totalValue = 0;
        
        if (name === '北化浩绅') {
          // 对于根节点，计算所有二级节点的值的总和
          const secondLevelValues = data.linkVOList.filter(link => link.source === name)
            .map(link => link.value);
          totalValue = secondLevelValues.reduce((sum, value) => sum + value, 0);
        } else if (name.includes('电表')) {
          // 如果是电表节点，从links中查找值
          data.linkVOList.forEach(link => {
            if (link.target === name) {
              totalValue = link.value;
            }
          });
        } else {
          // 对于二级单位，从links中找到它作为target的值
          const link = data.linkVOList.find(link => link.target === name);
          if (link) {
            totalValue = link.value;
          }
        }
        
        // 创建带有值和占比的新名称（原始名称保存为originName以便在tooltip中使用）
        return {
          name: `${name} (${totalValue.toFixed(2)} kwh) ${ratio.toFixed(2)}%`,
          originName: name,
          itemStyle: {
            color: this.getNodeColor(name),
            borderWidth: 0
          }
        };
      });
      
      // 更新links中的引用，使用新的节点名称
      const nameMap = {};
      originalNodes.forEach(node => {
        nameMap[node.originName] = node.name;
      });
      
      const links = data.linkVOList.map(link => ({
        source: nameMap[link.source] || link.source,
        target: nameMap[link.target] || link.target,
        value: link.value
      }));

      // 分析节点层级和计算流量
      const rootNode = originalNodes.find(node => node.originName === '北化浩绅');
      const rootIndex = rootNode ? originalNodes.findIndex(n => n.originName === rootNode.originName) : -1;
      
      // 找出第二级节点（厂区）
      const level2Nodes = [];
      const level2ToLevel3Map = {}; // 存储第二级节点和其对应的第三级节点
      const nodeFlowTotals = {}; // 存储每个节点的总流量
      
      // 计算每个第二级节点的总流量
      links.forEach(link => {
        // 通过从名称中提取原始名称进行比较
        const extractOriginalName = fullName => fullName.split(' (')[0];
        const sourceOrigName = extractOriginalName(link.source);
        const targetOrigName = extractOriginalName(link.target);
        const rootOrigName = rootNode ? rootNode.originName : '';
        
        // 如果链接的源是根节点，目标是第二级节点
        if (sourceOrigName === rootOrigName) {
          if (!nodeFlowTotals[targetOrigName]) {
            nodeFlowTotals[targetOrigName] = 0;
            level2Nodes.push(targetOrigName);
            level2ToLevel3Map[targetOrigName] = [];
          }
          nodeFlowTotals[targetOrigName] += link.value;
        }
        
        // 如果链接的源不是根节点且不是电表，那么它的目标是第三级节点（电表）
        else if (!sourceOrigName.includes('电表')) {
          // 将第三级节点添加到其父节点的列表中
          if (!level2ToLevel3Map[sourceOrigName]) {
            level2ToLevel3Map[sourceOrigName] = [];
          }
          if (!level2ToLevel3Map[sourceOrigName].includes(targetOrigName)) {
            level2ToLevel3Map[sourceOrigName].push(targetOrigName);
          }
          
          // 存储电表的流量
          if (!nodeFlowTotals[targetOrigName]) {
            nodeFlowTotals[targetOrigName] = 0;
          }
          nodeFlowTotals[targetOrigName] += link.value;
        }
      });
      
      // 按总流量对第二级节点排序（降序）
      level2Nodes.sort((a, b) => nodeFlowTotals[b] - nodeFlowTotals[a]);
      
      // 对每个第二级节点下的第三级节点（电表）按流量排序
      for (const level2Node of level2Nodes) {
        if (level2ToLevel3Map[level2Node]) {
          level2ToLevel3Map[level2Node].sort((a, b) => nodeFlowTotals[b] - nodeFlowTotals[a]);
        }
      }
      
      // 重新排列节点顺序 - 根据层级关系排序
      const sortedNodes = [];
      
      // 首先添加根节点
      if (rootIndex >= 0) {
        sortedNodes.push(rootNode);
      }
      
      // 依次添加每个厂区节点及其对应的电表节点（紧跟其后）
      for (const level2Node of level2Nodes) {
        // 添加厂区节点
        const level2NodeObj = originalNodes.find(node => node.originName === level2Node);
        if (level2NodeObj) {
          sortedNodes.push(level2NodeObj);
          
          // 紧接着添加该厂区下的所有电表节点
          if (level2ToLevel3Map[level2Node]) {
            for (const level3Node of level2ToLevel3Map[level2Node]) {
              const node = originalNodes.find(node => node.originName === level3Node);
              if (node) {
                sortedNodes.push(node);
              }
            }
          }
        }
      }

      const option = {
        // title: {
        //   text: '电表流量桑基图'
        // },
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          formatter: params => {
            if (params.dataType === 'node') {
              // 从名称中提取原始名称
              const originalName = params.data.originName || params.name.split(' (')[0];
              // 提取值
              let value = 0;
              if (params.name.includes('kwh')) {
                const match = params.name.match(/\((\d+(\.\d+)?) kwh\)/);
                if (match && match[1]) {
                  value = match[1];
                }
              }
              
              return `${originalName}：${Number(value).toFixed(2)} kwh`;
            }
            return `${params.data.source.split(' (')[0]} -> ${params.data.target.split(' (')[0]}<br/>流量: ${Number(params.data.value).toFixed(2)} kwh`;
          }
        },
        series: [{
          type: 'sankey',
          data: sortedNodes,
          links: links,
          layoutIterations: 32, // 增加布局迭代次数以优化布局
          nodeAlign: 'right', // 设置节点对齐方式
          emphasis: {
            focus: 'adjacency'
          },
          levels: [
            {
              depth: 0,
              itemStyle: {
                color: '#fbb4ae',
                borderWidth: 0
              },
              lineStyle: {
                color: 'source',
                opacity: 0.6
              }
            },
            {
              depth: 1,
              itemStyle: {
                color: '#b3cde3',
                borderWidth: 0
              },
              lineStyle: {
                color: 'source',
                opacity: 0.6
              }
            },
            {
              depth: 2,
              itemStyle: {
                color: '#ccebc5',
                borderWidth: 0
              },
              lineStyle: {
                color: 'source',
                opacity: 0.6
              }
            }
          ],
          lineStyle: {
            curveness: 0.5
          }
        }]
      };
      
      this.myChart.hideLoading();
      this.myChart.setOption(option);
    },
    
    // 获取节点颜色
    getNodeColor(name) {
      if (name.includes('电表')) {
        return '#decbe4';
      } else if (name === '北化浩绅') {
        return '#fbb4ae';
      } else {
        return '#b3cde3';
      }
    },
    
    // 调整图表大小 - 强制方法
    forceResizeChart() {
      if (!this.myChart) return;
      
      // 强制清除并重设图表容器的尺寸
      const container = this.$refs.sankeyChart;
      if (container) {
        // 强制重新计算容器大小
        this.myChart.resize({
          width: 'auto',
          height: 'auto'
        });
        
        // 确保整个更新周期完成
        this.$nextTick(() => {
          this.myChart.resize();
        });
      }
    },
    
    // 原有的调整图表大小的方法
    resizeChart() {
      this.forceResizeChart();
    },
    
    // 修改原有的 handleQuery 方法
    handleQuery() {
      if (!this.queryParams.beginTime) {
        this.$message({
          message: '请选择时间范围',
          type: 'warning'
        });
        return;
      }
      
      const params = {
        statType: this.queryParams.statType,
        beginTime: this.queryParams.beginTime,
        endTime: this.queryParams.endTime,
        type: this.queryParams.type,
        id: this.queryParams.id
      };
      
      this.myChart && this.myChart.showLoading();
      
      getAmmeterFlowData(params).then(response => {
        if (response.code === 200 && response.data) {
          this.updateChart(response.data);
        }
      }).catch(error => {
        // this.$message.error('获取数据失败');
        console.error('请求错误:', error);
        this.myChart && this.myChart.hideLoading();
      });
    },
    // 添加日期格式化方法
    formatDate(date, fmt) {
      const o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'H+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        'S': date.getMilliseconds()
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      for (let k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
        }
      }
      return fmt;
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.forceResizeChart);
    this.myChart && this.myChart.dispose();
    document.removeEventListener('mousemove', this.resize);
    document.removeEventListener('mouseup', this.stopResize);
  }
};
</script>

<style scoped>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.app-container {
  height: calc(100vh - 84px); /* 减去头部导航的高度 */
  padding: 10px;
  box-sizing: border-box;
  background: #f5f7fa;
}

.full-height {
  height: 100%;
}

.panel-wrapper {
  position: relative;
  height: 100%;
  min-width: 20px;
}

.left-panel {
  height: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 2px;
  box-sizing: border-box;
  border: 1px solid #EBEEF5;
  position: relative;
  transition: width 0.3s;
  overflow: hidden;
}

.left-panel.collapsed {
  width: 0 !important;
  padding: 0;
  margin: 0;
  border: none;
}

.tree-wrapper {
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: all 0.3s;
  overflow: hidden auto;
}

.tree-wrapper.hidden {
  width: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}

.collapse-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 40px;
  background: #fff;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  left: 0;
}

.left-panel:not(.collapsed) + .collapse-btn {
  left: calc(100% - 16px);
}

.collapse-btn:hover {
  background: #f5f7fa;
}

.collapse-btn i {
  font-size: 14px;
  color: #909399;
}

.chart-container {
  height: 100%;
  background: #fff;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  box-sizing: border-box;
}

.resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 200;
  display: none;
}

.left-panel:not(.collapsed):hover .resizer {
  display: block;
}

.resizer:hover,
.resizer.resizing {
  background: rgba(0, 0, 0, 0.1);
}

.right-col {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding-right: 10px;
  transition: all 0.3s ease-out;
}

.el-row {
  position: relative;
  height: 100%;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.el-col {
  flex-shrink: 0;
}

.right-col.el-col {
  flex-shrink: 1;
}

.search-wrapper {
  padding-bottom: 16px;
  border-bottom: 1px solid #EBEEF5;
  margin-bottom: 16px;
}

.chart-content {
  height: calc(100% - 80px);
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

#sankeyChart {
  width: 100% !important;
  height: 100% !important;
  min-height: 400px;
}
</style> 